<template>
	<view class="page bg-fff">
		<view class="listItem flex border-bottom-grey" @click="toDetail(item)" v-for="(item, index) in listData" :key="index">
			<image class="leftImg" :src="item.image[0]?.url" mode="scaleToFill"></image>
			<view class="contentWrap flex left-10">
				<view class="title txtsHidden">{{ item.title }}</view>
				<view class="col-grey font12 top-3">{{ item.time }}</view>
			</view>
		</view>

		<up-loadmore :status="loadingType" v-if="listData.length > 0" />

		<up-empty text="暂无数据" marginTop="100" mode="list" v-if="listData.length === 0 && loadingType === 'nomore'"></up-empty>
	</view>
</template>

<script setup>
import { ref } from "vue";
import { useUserInfoStore } from '@/store/index';
import { onLoad, onShareAppMessage, onShareTimeline, onReachBottom } from '@dcloudio/uni-app';
import { getArticleListByType } from '@/common/api/tools';

const userInfoStore = useUserInfoStore();

const pageType = ref('zhengw');

//列表
let listData = ref([]);
let next = ref('');
let loadingType = ref('loadmore');

// 页面加载
onLoad((options) => {
	uni.$check_and_login(init)
})

// 监听页面滚动到底部
onReachBottom(() => {
	if (loadingType.value === 'loadmore') {
		init();
	}
});

// 分享到好友
onShareAppMessage(() => {
	return {
		title: '政务公开信息',
		path: `/pages/tools/zheng-wu/list/index?puid=${userInfoStore.userInfo.id}`,
		imageUrl: '',
	}
})

// 分享到朋友圈
onShareTimeline(() => {
	return {
		title: '政务公开信息',
		query: `puid=${userInfoStore.userInfo.id}`
	}
})

//初始化
async function init(isRefresh=false) {
	if(isRefresh) {
		loadingType.value = 'loadmore';
		next.value = '';
	}
	if (loadingType.value === 'loading' || loadingType.value === 'nomore') return;
	
	try {
		loadingType.value = 'loading';
		let url = (next.value ? next.value : `/product/mall/article/list?type=${pageType.value}`);
		const res = await getArticleListByType(url);
		if(res.status !== 0) {
			uni.$u.toast(res.detail);
			return
		}
		if(isRefresh) {
			listData.value = res.detail.results;
		}else{
			listData.value.push(...res.detail.results);
		}
		next.value = res.detail.next;
		loadingType.value = res.detail.next ? 'loadmore' : 'nomore';	
	} catch (error) {}
}

//跳转详情
function toDetail(info) {
	uni.navigateTo({
        url: `/pages/tools/zheng-wu/detail/index?detailId=${info.id}`
    })
}
</script>

<style lang="scss" scoped>
.page{
	min-height: 100vh;
	overflow: hidden;
	.listItem{
		width: calc(100% - 56rpx);
		align-items: stretch;
		padding: 28rpx;
		.leftImg{
			width: 228rpx;
			height: 153rpx;
			border-radius: 10rpx;
		}
		.contentWrap{
			width: calc(100% - 248rpx);
			align-items: flex-start;
			flex-direction: column;
			justify-content: space-between;
		}
	}
}
</style>